<template>
  <div class="waterTable">
    <h3>{{ $t('versionManagement.version59') }}</h3>
    <i class="el-icon-caret-top" @click="colseTable"></i>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="385"
      border
      @sort-change="handleSortChange"
    >
      <el-table-column
        prop="operationLog"
        key="operationLog"
        :label="$t('equipmentManagement.shebei140')"
        show-overflow-tooltip
        align="center"
    
      />
      <el-table-column
        prop="reason"
        :label="$t('versionManagement.version50')"
        show-overflow-tooltip
        align="center"
  
      />

      <el-table-column
        prop="time"
        :label="$t('equipmentManagement.shebei109')"
        show-overflow-tooltip
        align="center"
      
      />

      <el-table-column
        prop="operationUser"
        :label="$t('equipmentManagement.shebei7')"
        show-overflow-tooltip
        align="center"
     
      />
      
    </el-table>

    <div style="margin: 16px 0; text-align: right">
      <el-pagination
        background
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'waterTable',
  props: {},
  data() {
    return {
      page: 1, // 默认第1页
      total: 0, // 总条数
      limit: 10, // 每页条数
      sortType: 'desc',
      tableData: [],
    };
  },
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  watch: {
    id() {

      this.toQuery();
    },
  },

  created() {
    this.toQuery();
  },

  methods: {
    handleSortChange({ prop, order }) {
      if (order === 'ascending') {
        this.sortType = 'asc';
      } else if (order === 'descending') {
        this.sortType = 'desc';
      }
      this.toQuery();
    },
    toQuery() {
      let params = `/installationpackageflowchart/page?page=${this.page.toString()}&limit=${this.limit.toString()}&interfaceId=${this.id}&sortType=${this.sortType}`;
      this.$http
        .get(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.tableData.forEach((item) => {
              if (item.deviceStatus == 2) {
                // 已激活状态下需要判断时间是否是空
                if (!item.probationaryPeriod) {
                  item.probationaryPeriod = this.$t('equipmentManagement.shebei101');
                }
                if (!item.cycle) {
                  item.cycle = this.$t('equipmentManagement.shebei101');
                }
              }
            });
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    handleSizeChange(val) {
      this.limit = val;
      this.toQuery();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.toQuery();
    },
    colseTable() {
      this.$emit('closeWaterTable');
    },
  },
};
</script>

<style lang="scss">
.waterTable {
  position: relative;
  margin-top: 20px;
  > h3 {
    margin-bottom: 10px;
  }
  > .el-icon-caret-top {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 55px;
    cursor: pointer;
    color: #003e67;
  }
  .updaterUser_box {
    i {
      position: absolute;
      top: 0px;
      right: 20px;
      cursor: pointer;
      font-size: 16px;
    }
  }
}
</style>
